require("../css/commCss/normalize.less");
require("../css/commCss/reset.less");
require("../css/commCss/property.less");
require("../css/commCss/basic.less");
require("../fonts/iconfont.css");
require("../css/personalData.less");

//axios请求
const axios = require("axios");

//weui-插件库
require("weui");
const weui = require("weui.js");

document.addEventListener("DOMContentLoaded", function () {
  //回填数据
  axios.get("http://139.9.177.51:8099/users/accountinfo", {
      params: {
        userId: localStorage.userId,
      },
    })
    .then(function (res) {
      // console.log(res.data.data);
      let data = res.data.data;

      //渲染昵称
      document.querySelector("#nickname").value = data.nickname;

      //下面的数据如果是新用户，需要判断
      if (data.imgurl) {
        //头像
        document.querySelector("#imgurl").src = data.imgurl;
      }

      if (data.gender) {
        //性别
        document.querySelector("#sex").textContent = data.gender;
      }

      if (data.birthday) {
        //生日
        document.querySelector("#birthday").textContent = data.birthday.substr(0,10);
      }

      if (data.address) {
        //省份、城市
        document.querySelector("#province").textContent =data.address.split(",")[0];
        document.querySelector("#city").textContent =data.address.split(",")[1];
      }

      if (data.sign) {
        //个人简介
        document.querySelector("#sign").value = data.sign;
        document.querySelector('#curNum').textContent=data.sign.length;
      }
    });


  //给多行文本框添加input事件
  document.querySelector("#sign").addEventListener("input", function () {
    let num = this.value.length; //获取sign的长度
    document.querySelector("#curNum").textContent = num; //渲染
  });


  /*点击header 返回上一个页面 */
  document.querySelector("header").addEventListener("click", function () {
    history.go(-1);
  });


  /* 性别 */
  document.querySelector("#sexPicker").addEventListener("click", function () {
    weui.picker(
      [
        {
          label: "女",
          value: 0,
        },
        {
          label: "男",
          value: 1,
        },
      ],
      {
        //点击确定触发
        onConfirm: function (result) {
          //console.log(result);
          //console.log(result[0].label);//男女

          //把sex渲染到页面中

          document.querySelector("#sex").textContent = result[0].label;
        },
        title: "请选择性别",
      }
    );
  });

  let proArr = [];
  let cityArr = [];
  //获取省份数据
  axios.get("http://139.9.177.51:8099/address/province").then(function (res) {
    //   console.log(res.data.data);
    let data = res.data.data;

    //处理数据--响应参数处理成相等的
    proArr = data.map(function (v) {
      return { label: v.name, value: v.addressId };
    });
  });


  /* 省份 */
  document.querySelector("#provincePicker").addEventListener("click", function () {
      weui.picker(proArr, {
        //确定
        onConfirm: function (result) {
          // console.log(result[0]);//{label: '天津市', value: 120000}

          //渲染到页面中
          document.querySelector("#province").textContent = result[0].label;
          //获取pid
          let pid = result[0].value;

          //从后端获取城市
          axios.get("http://139.9.177.51:8099/address/city/" + pid)
            .then(function (res) {
              // console.log(res.data);
              let data = res.data.data;

              cityArr = data.map(function (v) {
                return { label: v.name, value: v.addressId };
              });

              //清除之前选择的城市--索引为0的城市或者改变文本
              document.querySelector("#city").textContent = "请填写";
            });
        },
        title: "请选择省份",
      });
    });


  /* 城市 */
  document.querySelector("#cityPicker").addEventListener("click", function () {
    weui.picker(cityArr, {
      //点击确定触发
      onConfirm: function (result) {
        //渲染到页面中
        document.querySelector("#city").textContent = result[0].label;
      },
      title: "请选择城市",
    });
  });


  /* 补零函数 */
  function fillZero(z) {
    return z <= 9 ? "0" + z : z;
  }


  /* 生日 */
  document.querySelector("#birthdayPicker").addEventListener("click", function () {
      weui.datePicker({
        start: new Date().getFullYear() - 80, //起始时间
        end: new Date().getFullYear(), //当前时间

        onConfirm: function (result) {
          // console.log(result);  //使用value中对应的年月日

          let str = [
            result[0].value,
            fillZero(result[1].value),
            fillZero(result[2].value),
          ].join("-"); //用数组保存,再用join方法把数组拼接成字符串 YYYY-mm-dd格式
          //   console.log(str);  //2022-1-11 后端需要的格式YYYY-mm-dd，需要补零

          //渲染数据到页面中
          document.querySelector("#birthday").textContent = str;
        },
        title: "请选择生日",
      });
    });

  /*头像上传的注意事项
        1.获取的是input(type='file')的files
        2.参数需要使用FormData对象 
            let fd=new FormData()    fd.append('xxxx',file)
        3.上传的参数是fd对象
  */

  /* 头像上传--获取input的上传图片的值(files) --先给input添加change事件*/
  document.querySelector("#fileImg").addEventListener("change", function () {
    // console.log(this.files);
    let file = this.files[0]; //input的上传图片的值

    //图片上传必须借助FormData(内置对象)--接口文档的类型是form-data
    //1.实例化一个fd对象
    let fd = new FormData();

    //2.把接口参数追加到fd对象中
    fd.append("imgurl", file);

    //发送请求
    axios
      .post("http://139.9.177.51:8099/users/upload", fd) // {imgurl:file}参数错误，接收不到
      .then(function (res) {
        // console.log(res);
        // console.log('http://139.9.177.51:8099'+res.data.data);

        //判断图片上传失败成功
        if (res.data.status === 1) {
          //上传失败
          weui.toast(res.data.msg);
        } else {
          //上传成功
          //拼接上传图片的路径,再渲染到页面中(图片src)
          document.querySelector("#imgurl").src =
            "http://139.9.177.51:8099" + res.data.data;
        }
      });
  });


  /* 给图片imgurl添加点击事件，点击了图片之后再触发input */
  document.querySelector("#imgurl").addEventListener("click", function () {
    document.querySelector("#fileImg").click(); //给input添加点击事件，触发input js代码
  });
  

  //保存信息
  document.querySelector("#btn").addEventListener("click", function () {
    //当需要获取的参数较多，先保证参数是否正确，才发送请求
    let params = {
      imgurl: document.querySelector("#imgurl").src, //头像
      nickname: document.querySelector("#nickname").value, //昵称
      gender: document.querySelector("#sex").textContent, //性别
      birthday: document.querySelector("#birthday").textContent, //生日
      address: [
        document.querySelector("#province").textContent,
        document.querySelector("#city").textContent,
      ], //接口文档address是个数组
      sign: document.querySelector("#sign").value, //个人简介
      userId: localStorage.getItem("userId"), //用户id号
    };
    // console.log(params);

    axios
      .post("http://139.9.177.51:8099/users/userEdit", params)
      .then(function (res) {
        //判断
        if (res.data.status === 0) {
          //成功
          weui.toast("修改成功", {
            //返回上一个页面
            callback: function () {
              location.href = "./mine.html";
            },
          });
        } else {
          //失败
          weui.alert("修改失败");
        }
      });
  });
});
